<template>
    <div class="y-table">
        <!-- 表格组件 -->
        <a-table
            :dataSource="props.dataSource"
            :columns="props.columns"
            :pagination="props.pagination"
            :row-selection="props.isSelect ?? rowSelection1"
            class="tableContent"
            bordered
            @change="tableChange"
        >
            <template #title>
                <slot name="title">
                    <div class="table-header">
                        <h3>数据表格</h3>
                    </div>
                </slot>
            </template>
            <template #headerCell="{ column }">
                <slot name="headerCell" :column="column">

                </slot>
            </template>

            <template #bodyCell="scope">
                <template v-if="scope.column.isSlot">
                    <slot :name="scope.column.slot" :scope="scope"></slot>
                </template>
                <template v-else-if="scope.column.type === 'image'">
                    <a-image :src="scope.text"/>
                </template>
                <template v-else-if="scope.column.type === 'dataIndex'">
                    {{scope.index + 1}}
                </template>
                <template v-else-if="scope.column.type === 'tags'">
                    <template v-for="tag in scope.value" :key="tag">
                        <a-tag color="blue">{{tag}}</a-tag>
                    </template>
                </template>
                <template v-else>
                    {{scope.text}}
                </template>
            </template>
            <template #footer>
                <slot name="footer">
                    人生苦短，别做程序员～
                </slot>
            </template>
        </a-table>
    </div>
</template>

<script setup lang="ts">
import {useSlots} from "vue";

const props = defineProps<{
    dataSource: Object,
    columns: Record<string, any>,
    isSelect?:boolean,
    pagination?:Record<string, any>
}>();

const emits = defineEmits<{
    (e: "batch", val: any): void,
    (e: "update:pagination", params: any): void,
    (e: "reRenderTable"): void
}>();


// defineProps是3.2中新的语法,不需要从 vue里面引入出来

const slots = useSlots();

console.log(slots);

// 是否多选
const rowSelection1 = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
        console.log(selectedRowKeys, selectedRows)
        emits('batch', selectedRowKeys)
    },
    getCheckboxProps: (record: any) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name
    })
}

const tableChange = (pagination:any, filters:any, sorter:any, { currentDataSource }: any) => {
    if (pagination){
        emits("update:pagination", pagination)
        emits("reRenderTable")
    }
}

</script>

<style scoped lang="less">
.tableContent{
    margin: 0 10px;

    .table-header{
        display: flex;
    }
}
</style>
